<template>
  <div>
    <fwb-modal v-if="isShowModal" @close="closeModal" size="md" id="CreateModal">
      <template #header>
        <div class="text-lg flex flex-col text-sm text-[#9CA3AF] font-[500] font-Medium">
          <div>
            <p class="text-md s4k:text-[16px]">Copy to Cameras</p>
          </div>
        </div>
      </template>

      <template #body>
        <div class="w-full h-[455px]">
          <div class="absolute w-full h-[1px] bg-[var(--grid)] top-[50px] left-0 s2k:top-[60px] s4k:top-[85px]"></div>
          <div class="text-[20px] font-Medium font-[500] pr-[30px] relative mt-[10px] s2k:mt-0">Copy Settings to Cameras</div>
          <div class="w-full flex flex-row mt-[10px] s4k:mt-[-10px]">
            <div class="flex-[4]">
              <span class="text-[#9CA3AF] text-md font-[500]">Select Settings</span>
              <div class="w-full h-[357px] mt-[16px] border-[var(--grid)] border border-solid">
                <div class="w-full h-[50px] bg-[var(--theme-search-bg)] text-sm text-[#9CA3AF] font-[700] font-Medium flex flex-row justify-start items-center">
                  <div class="w-[40px] text-center">
                    <input type="checkbox" v-model="rulesAll" class="w-[16px] h-[16px] rounded border border-solid border-[var(--grid)] bg-[var(--inputBg)] cursor-pointer s4k:rounded-[4px]">
                  </div>
                  <div class="w-[200px] h-full leading-[60px] pl-[16px] flex flex-row justify-start items-center">CAMERA</div>
                  <div class="w-[200px] h-full leading-[60px] pl-[16px] flex flex-row justify-start items-center">LOCATION</div>
                </div>
                <div class="w-full h-[316px]">
                  <div class="w-full h-[50px] border-b border-solid border-[var(--grid)] text-md text-[#9CA3AF] font-[500] font-Medium flex flex-row justify-start items-center" v-for="item in rulesList" :key="item.id">
                    <div class="w-[40px] text-center">
                      <input type="checkbox" v-model="item.checked" class="w-[16px] h-[16px] rounded border border-solid border-[var(--grid)] bg-[var(--inputBg)] cursor-pointer s4k:rounded-[4px]">
                    </div>
                    <div class="w-[200px] h-full pl-[16px] flex flex-row justify-start items-center text-[var(--theme-font-color)]">{{item.time}}</div>
                    <div class="w-[200px] h-full pl-[16px] flex flex-row justify-start items-center">{{item.event}}</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="flex-[1] flex">
              <svg-icon name="right" width="28px" height="16px" class="svgDate svg4k m-auto"></svg-icon>
            </div>
            <div class="flex-[4]">
              <span class="text-[#9CA3AF] text-md font-[500]">Select Cameras</span>
              <div id="list" class="w-full h-[357px] mt-[16px] border-[var(--grid)] border border-solid">
                <div class="w-full h-[50px] bg-[var(--theme-search-bg)] text-sm text-[#9CA3AF] font-[700] font-Medium flex flex-row justify-start items-center">
                  <div class="w-[40px] text-center">
                    <input type="checkbox" v-model="checkAll" class="w-[16px] h-[16px] rounded border border-solid border-[var(--grid)] bg-[var(--inputBg)] cursor-pointer s4k:rounded-[4px]">
                  </div>
                  <div class="w-[200px] h-full leading-[60px] pl-[16px] flex flex-row justify-start items-center">CAMERA</div>
                  <div class="w-[200px] h-full leading-[60px] pl-[16px] flex flex-row justify-start items-center">LOCATION</div>
                </div>
                <div class="w-full h-[316px]">
                  <div class="rulesList w-full h-[50px] border-b border-solid border-[var(--grid)] text-md text-[#9CA3AF] font-[500] font-Medium flex flex-row justify-start items-center" v-for="item in checkList" :key="item.id">
                    <div class="w-[40px] text-center">
                      <input type="checkbox" v-model="item.checked" class="w-[16px] h-[16px] rounded border border-solid border-[var(--grid)] bg-[var(--inputBg)] cursor-pointer s4k:rounded-[4px]">
                    </div>
                    <div class="w-[200px] h-full pl-[16px] flex flex-row justify-start items-center text-[var(--theme-font-color)]">{{item.camera}}</div>
                    <div class="w-[200px] h-full pl-[16px] flex flex-row justify-start items-center">{{item.location}}</div>
                  </div>
                </div>
              </div>
              <div class="text-[#9CA3AF] font-[500] font-Medium text-md mt-[16px]">9 of 9 cameras selected</div>
            </div>
          </div>
        </div>
      </template>
      <template #footer>
        <div class="absolute bottom-0 left-0 w-full h-[81px] border-t border-solid border-[var(--grid)] z-[999] flex flex-row justify-start items-center ">
          <div class="w-[209px] h-[41px] font-[500] text-white font-Medium text-md bg-[#1C64F2] rounded-lg flex ml-[1rem] cursor-pointer s4k:rounded-[4px]"><span class="m-auto" @click="closeModal">Copy Settings to Cameras</span></div>
        </div>
      </template>
    </fwb-modal>
  </div>

</template>

<script setup>
import { onMounted, reactive, ref } from "vue";
import {FwbModal} from 'flowbite-vue'
const isShowModal = ref(false)
const closeModal = () => {
  isShowModal.value = false
}
const showModal = () => {
  isShowModal.value = true
}
const rulesAll = ref(true)
const rulesList = ref([
  {id: 1, time: 'Mon - Fri, 09:00 - 21:00', event: 'Continuous', checked: true,},
  {id: 2, time: 'Mon - Fri, 21:00 - 24:00', event: 'Motion and Sound', checked: true,},
  {id: 3, time: 'Sat - Sun, 00:00 - 24:00', event: 'Motion and Sound', checked: true,},
]);
const checkAll = ref(true)
const checkList = ref([]);
for (let i = 0; i < 10; i++) {
  checkList.value.push({
    id: i + 1,
    camera: `Camera 00${i + 1}`,
    location: `Location ${i + 1}`,
    checked: true,
  });
}

defineExpose({
  showModal,
})
</script>

<style scoped lang="scss">
.rulesList{
  &:last-child{
    border-bottom: none;
  }
}
#CreateModal {
  :deep(.max-w-md) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0;
    border-radius: 0;
    max-width: 1064px;
    height: 660px;

    button {
      cursor: pointer;

      &:hover {
        background: var(--theme);
      }

      svg {
        color: #6B7280;
      }
    }

    .bg-white {
      width: 100%;
      height: 100%;
      background-color: var(--theme);
    }
    .p-4{
      padding-left: 1.67rem;
      padding-right: 1.67rem;
    }
    .p-6 {
      padding-left: 1.67rem;
      padding-right: 1.67rem;

      .list {
        overflow-y: scroll;
        padding-right: 15px;
      }

      .list::-webkit-scrollbar {
        width: 4px;
      }

      .list::-webkit-scrollbar-thumb {
        background-color: var(--scrollbar-thumb);
        border-radius: 10px;
      }

      .list::-webkit-scrollbar-track {
        background-color: var(--scrollbar-track);
        border-radius: 10px;
      }
    }
  }
}
@media screen and (min-width: 2560px) {
  #CreateModal {
    :deep(.max-w-md) {
      transform: scale(1.3);
    }
  }
}
@media screen and (min-width: 3840px) {
  //#CreateModal {
  //  :deep(.max-w-md) {
  //    max-width: 2128px;
  //    height: 1320px;
  //    button{
  //      svg{
  //        transform: scale(2);
  //      }
  //    }
  //    .p-4{
  //      padding: 2rem;
  //    }
  //    .p-6 {
  //      padding-left: 2rem;
  //      padding-right: 2rem;
  //
  //      .list {
  //        overflow-y: scroll;
  //        padding-right: 30px;
  //      }
  //    }
  //  }
  //}
  //input[type="checkbox"] {
  //  transform: scale(2);
  //}
  .svg4k{
    transform: scale(1);
  }
  #CreateModal {
    :deep(.max-w-md) {
      height: 720px;
      transform: scale(2);
      .p-4{
        padding: 0.8rem;
      }
      .p-6 {
        padding:  1rem;
      }
    }
  }
}
</style>
<style>
#list {
  overflow-y: scroll;
  padding-right: 1px;
}

#list::-webkit-scrollbar {
  width: 3px;
}

#list::-webkit-scrollbar-thumb {
  background-color: var(--scrollbar-thumb);
  border-radius: 10px;
}

#list::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
  border-radius: 10px;
}
</style>